<template>
  <div class="content">
    <el-container>
      <el-header>
        <div class="el-header-left">
          <img src="../assets/logo.png" alt="" />
          <p>电商后台管理系统</p>
        </div>
        <div class="el-header-right">
          <el-button
            type="info"
            style="margin-left: 1050px; margin-top: 10px"
            plain
            @click="goback"
            >退出</el-button
          >
        </div>
      </el-header>
      <el-container>
        <!-- :default-active="$route.path"   设置刷新选中的状态  与下面的路径对应  设置路由router -->
        <el-aside :width="iscollapse ? '60px' : '200px'">
          <p @click="iscollapse = !iscollapse">| | |</p>
          <el-menu 
            class="el-menu-vertical-demo"
            background-color="#373f41"
            text-color="#fff"
            router
            :collapse="iscollapse"
            active-text-color="#409fff"
            :default-active="activePath"
          >
            <el-submenu
              v-for="(item, index) in menus"
              :key="index"
              :index="item.id + ''"
            >
              <template slot="title">
                <i :class="icon[item.id]"></i>
                <span style="margin-left: 20px">{{ item.authName }}</span>
              </template>

              <el-menu-item
                v-for="(ite, id) in item.children"
                :key="id"
                :index="'/' + ite.path"
                > 
                <i :class="icon[ite.id]"></i>
                <span style="margin-left: 20px">{{ ite.authName }}</span>
                </el-menu-item
              >
            </el-submenu>  
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "about",
  data() {
    return {
      menus: [],
      iscollapse: false,
      icon: {
        125: "iconfont icon-ic_name",
        110: "iconfont icon-username",
        103: "iconfont icon-zhengfangti-mianxing",
        111: "iconfont icon-changyongicon-",
        112: "iconfont icon-quanxianguanli",
        101: "iconfont icon-gouwudai",
        104: "iconfont icon-24gf-bag",
        115: "iconfont icon-xingxing",
        121: "iconfont icon-trash-facet2",
        102: "iconfont icon-dingdan",
        107: "iconfont icon-zhifeiji",
        145: "iconfont icon-shujutongji",
        146: "iconfont icon-qizhi",
      },
    };
  },
  mounted() {
    this.getdata();
  },
  computed: { 
    activePath() {
      return this.$route.meta.parentPach?this.$route.meta.parentPach:this.$route.path
    }
  },
  // computed: {
  //     activePath() {
  //           return this.$router.meta.parentPath? this.$router.meta.parentPath: this.$router.path;
  //     },
  // },
  methods: {
    // 退出
    goback() {
      localStorage.clear();
      this.$router.push("/");
      this.$message("退出成功");
    },
    // 数据渲染
    async getdata() {
      var res = await this.$axios({
        url: "/api/private/v1/menus",
        method: "get",
      }).catch((err) => err);
      console.log(res.data.data,"左侧边栏");
      this.menus = res.data.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-header {
  background-color: #373f41;
  color: white;
  display: flex;
  .el-header-left {
    width: 16%;
    display: flex;
    justify-content: space-around;
    img {
      width: 40px;
      height: 40px;
      margin-top: 5px;
    }
    p {
      font-size: 21px;
      color: white;
      text-align: center;
      margin-top: 10px;
    }
  }
  .el-header-right {
    width: 84%;
  }
}     

.el-aside {
  background-color: #373f41;
  color: white;
  p {
    text-align: center;
    color: white;
  }
}

.el-main {
  background-color: #eaedf1;
  color: white;
}

.content,
.el-aside,
.el-container {
  height: 100%;
}
</style>